<template>
	<view>
		<dsl-navbar title="我的订单" bgTopImg="white"></dsl-navbar>
		<view class="margin-tb bg-white padding rowsb">
			<view v-for="(item,index) in orderTitles" :key="index" @click="orderAvtive = index">
				<view :class="{'active_title':index == orderAvtive}">{{item.title}}</view>
				<view class="active_heng" :class="{'active_heng1':index ==orderAvtive}"></view>
			</view>
		</view>
		<view v-if="orderList && orderList.length">
			<view class="bg-white margin radius padding order_body" v-for="(item,index) in orderList" :key="index">
				<view class="text-sm text-gray">订单编号：{{item.orderNo}}</view>
				<view class="flex margin-tb">
					<image :src="item.orderDetail.tourImg" class="order_image"></image>
					<view class="margin-left">
						<view class="one_overflow order_title">{{item.orderDetail.tourName}}</view>
						<view class=" order_num margin-top-xs">数量：{{item.orderDetail.number}}</view>
						<view class="order_num order_pay ">￥{{item.payPrice}}</view>
					</view>
				</view>
				<view class="flex justify-end">
					<view class="order_submit_1" v-if="orderAvtive !=2" @click="post_cancelOrder(item)">取消订单</view>
					<view class="order_submit_2" v-if="orderAvtive == 0" @click="payOrder(item)">立即支付</view>
					<view class="order_submit_2" v-if="orderAvtive == 1" @click="post_refundOrder(item)">申请退款</view>
				</view>
			</view>
		</view>
		<view v-else>
			<moreLoading></moreLoading>
		</view>
	</view>
</template>

<script>
	import {
		get_orderList, //订单列表
		post_cancelOrder, //取消订单
		post_refundOrder, //申请退款
		payOrder, //订单支付
	} from '../../common/path.js'
	export default {
		data() {
			return {
				orderTitles: [{
						id: 1,
						title: '待支付'
					},
					{
						id: 2,
						title: '已支付'
					},
					{
						id: 3,
						title: '申请退款'
					}
				],
				orderAvtive: 0, //默认选中状态
				orderList: [], //订单列表
			}
		},
		//生命周期函数
		onReady() {},
		onLoad() {},
		onShow() {
			uni.setStorageSync('mpShareTitle','芒果乐游团')
			this.get_orderList()
		},
		watch: {
			orderAvtive() {
				this.get_orderList()
			}
		},
		methods: {

			//取消订单
			post_cancelOrder(item) {
				let _this = this
				uni.showActionSheet({
					itemList: ['取消订单'],
					success: function(res) {
						if (res.tapIndex == 0) {
							_this.cancelOrder(item)
						} else {}
					},
					fail: function(res) {
						console.log(res.errMsg);
					}
				});
			},
			//订单支付
			payOrder(item) {
				this.Http.POST(payOrder, {
						id: item.id,
						payType: 1
					})
					.then(res => {
						if (res.code == 0) {
							console.log('[订单]', res);
							this.requestPayment(res.data)
						} else {
							this.$tools.showToast(res.msg)
						}
					})

			},
			//微信支付
			requestPayment(res) {
				let _this = this
				console.log('[支付参数]', res);
				let datas = {
					nonceStr: res.nonceStr, //随机字符串
					package: res.payPackage, //下单接口返回参数
					timeStamp: res.timeStamp, //时间戳
					signType: res.signType, //签名算法，应与后台一致
					paySign: res.paySign, //签名
				}
				console.log(datas);
				uni.requestPayment({
					nonceStr: res.nonceStr, //随机字符串
					package: res.payPackage, //下单接口返回参数
					timeStamp: res.timeStamp, //时间戳
					signType: res.signType, //签名算法，应与后台一致
					paySign: res.paySign, //签名
					success: function(aaa) {
						uni.showToast({
							title: '支付成功',
							icon: 'none'
						})
					},
					fail: function(err) {
						
						console.log('支付失败===>', err)
					},
				})
			},
			//取消订单api
			cancelOrder(item) {
				let data = {
					id: item.id,
					userId: uni.getStorageSync('userInfo').id
				}
				this.Http.POST(post_cancelOrder, data)
					.then((res) => {
						console.log('[取消订单]', res);
						if (res.code == 0) {
							this.get_orderList()
							this.$tools.showToast2(res.msg)
						} else {
							this.$tools.showToast(res.msg)
						}
					})
			},


			//取消订单
			post_refundOrder(item) {
				let _this = this
				uni.showActionSheet({
					itemList: ['取消订单'],
					success: function(res) {
						if (res.tapIndex == 0) {
							_this.cancelOrder(item)
						} else {}
					},
					fail: function(res) {
						console.log(res.errMsg);
					}
				});
			},
			//取消订单api
			refundOrder(item) {
				let data = {
					id: item.id,
					userId: uni.getStorageSync('userInfo').id
				}
				this.Http.POST(post_cancelOrder, data)
					.then((res) => {
						console.log('[申请退款]', res);
						if (res.code == 0) {
							this.get_orderList()
							this.$tools.showToast2(res.msg)
						} else {
							this.$tools.showToast(res.msg)
						}
					})
			},



			//获取订单列表
			get_orderList() {
				let data = {
					buyer: uni.getStorageSync('userInfo').id,
					orderState: this.orderAvtive
				}
				this.Http.POST(get_orderList, data)
					.then((res) => {
						console.log('[订单列表]', res);
						if (res.code == 0) {
							this.orderList = res.data
						}
					})
			}

		},
		computed: {},
		components: {}
	}
</script>

<style lang="scss">
	page {
		background: #F6F6F6;
	}

	//选中状态
	.active_heng {
		background-color: #2BD6C7;
		height: 4rpx;
		opacity: 0
	}

	.active_heng1 {
		opacity: 1 !important;
	}

	.active_title {
		color: #2BD6C7;
	}


	.order_image {
		width: 124rpx;
		height: 124rpx;
		background: #EEEEEE;
		opacity: 1;
	}

	.order_title {
		width: 400rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #3D3C3C;
		opacity: 1;
	}

	.order_num {
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #AEADAD;
		opacity: 1;
	}

	.order_pay {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #DE1010;
		opacity: 1;
		margin-top: 5rpx;
	}

	.order_submit_1 {
		width: 139rpx;
		height: 49rpx;
		background: #F8F8F8;
		opacity: 1;
		border-radius: 25rpx;
		line-height: 49rpx;
		text-align: center;
		color: #A1A1A1;
	}

	.order_submit_2 {
		width: 139rpx;
		height: 49rpx;
		background: #38DFB0;
		opacity: 1;
		border-radius: 25rpx;
		line-height: 49rpx;
		text-align: center;
		color: white;
		margin-left: 30rpx;
	}

	.order_body {
		box-shadow: 0rpx 3rpx 6rpx rgba(0, 0, 0, 0.07);
	}
</style>
